<template>
<div>
    <div class="audioShare" id="audioShare">
        <!-- 轮播图 -->
        <div class="swiperBox">
            <vue-canvas-poster :widthPixels="600" v-for="(paintingItem,index) in paintingList" :key="index" :painting="paintingItem" @success="posterSuccess" @fail="posterFail"></vue-canvas-poster>
            <swiper :options="swiperOption" class="swiper">
                <swiper-slide v-for="(item,index2) in posterImgList" :key="index2">
                  <img v-lazy="item" class="image" />
                  <!-- <img v-else :data-src="item" alt="" class="swiper-lazy swiper-img image">
                  <div class="swiper-lazy-preloader"></div> -->
                    <!-- widthPixels读取其屏幕宽 -->
                </swiper-slide>
                <div class="swiper-pagination change" slot="pagination"></div>
            </swiper>
        </div>

        <!-- 下面按钮 -->
        <div class="chooseBox">
            <!-- 判断类型是否为音频3 -->
            <div class="chooseBox_input">
                <input type="text" maxlength="20" placeholder-style="color:#fff" placeholder="输入一句你想分享的话制作个性海报" v-model="limitText" @input="limitInput($event)" />
                <span class="limitNum">{{limitNum}}/20</span>
            </div>
            <!--是否展示个人手机号码-->
            <div class="chooseBox_showPhone" @click="showPhoneIconBtn">
                <div class="phoneImg" :class="showPhoneIcon?'on':''"></div>
                <div class="showPhoneText">是否展示个人手机号码</div>
            </div>
            <div class="chooseBox_saveBtn">
                <div class="saveBtnBox" @click="saveImgBtn">
                    <div class="imgWrap">
                        <img v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_xiangce@2x.png'" />
                        <span>保存到相册</span>
                    </div>
                </div>
                <div class="saveBtnBox" @click="share">
                    <div class="imgWrap">
                        <img v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_wechat@2x.png'" />
                        <span>分享给好友</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" :modal="true" :closeOnClickModal="true" class="popup" v-if="isPopup">
        <span class="popup-text">长按保存图片</span>
        <img v-lazy="img" class="popup-image" />
    </mt-popup>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import wx from "weixin-js-sdk";
import {
    Toast
} from "mint-ui";
export default {
    name: "AudioSharing",
    data() {
        let _self = this
        return {
            //歌曲名字
            songName: '',
            link: "",
            sharingId: "", //歌曲id
            type: '',
            img: "",
            imgIndex: 0,
            popupVisible: false,
            swiperOption: {
                autoplay: 0,
                loop: true,
                roundLengths : true, //防止文字模糊
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                pagination: {
                    el: '.swiper-pagination',
                    // type : 'progressbar', //分页器形状
                    clickable: true, //点击分页器的指示点分页器会控制Swiper切换
                },
                // lazy: {
                // 	loadPrevNext: true
                // },
                on: {
                    slideChangeTransitionEnd: function () {
                        _self.imgIndex = this.activeIndex
                        // 切换结束时，告诉我现在是第几个slide
                    }
                }
            },
            showPhoneIcon: false,
            current: 0,
            limitNum: 0,
            typeIndex: 0,
            limitText: "", //输入框
            limitTextInput: "",
            type: "", //1是栏目，2是合辑，3是音频
            titleArr: ["栏目分享", "专题分享", "音频分享", "达人榜"],
            currentTypeArr: ["栏目", "专题", "音频", "达人榜"],
            telephone: "", //手机号码
            cavImg: "",
            logo: "https://youyang-cdn.mdshuzhi.com/upload/pic_logo@2x.png",
            QRCode: "https://youyang.mdshuzhi.com/static/miniprogram/qrcode.png", //二维码图片
            defaultFix: false,
            userNameLeft: 250,
            userNameLeft2: 80,
            hasLenLeft: 240,
            currentType: "",
            TalentLeft: 300,
            fingerImg: "https://youyang.mdshuzhi.com/static/miniprogram/1.png",
            posterImg1: "", //海报1
            posterImg2: "", //海报2
            posterImg3: "", //海报3
            posterImgList: [], //海报集合
            //海报配置
            painting: {},
            painting2: {},
            painting3: {},
            paintingList: [], //海报集合
            userInfo: localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : {}
        };
    },
    created(){
      this.sharingId = this.$route.query.audioId;
      this.songName = this.$route.query.title;
      this.link = this.$route.query.link;
      this.imgurl = this.$route.query.imgurl;
      this.type = this.$route.query.type;
      console.log('海报信息',this.imgurl)
    },
    mounted() {
        // wx.config({

        //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

        //     appId: '', // 必填，公众号的唯一标识

        //     timestamp: , // 必填，生成签名的时间戳

        //     nonceStr: '', // 必填，生成签名的随机串

        //     signature: '', // 必填，签名，见附录1

        //     jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

        // });
        let that = this
        const type = this.type
        if (Number(type) != 4 && Number(type) != 6 && Number(type) != 7) {
            console.log("跑这里")
            this.currentType = this.currentTypeArr[Number(type) - 1]
        } else if (type == 6 || type == 7) {
            console.log("跑那里")
            this.currentType = this.currentTypeArr[Number(typeIndex)]
        } else {
            this.TalentLeft = 250
        }
        if (type) {
            this.typeIndex = Number(type) - 1
        }
        if (Number(type) != 6 && Number(type) != 7) {
            this.title = this.titleArr[Number(type) - 1]
        } else {
            this.title = this.titleArr[Number(typeIndex)]
        }
        if(Number(type) == 1 || Number(type) == 2 || Number(type) == 3){
          this.cavImg = this.imgurl
          this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
          this.$nextTick(() => {
              that.makeShareImg();
          });
        }else{
          controller.shareImg({
                  type: Number(that.$route.query.type), //类别
                  token: localStorage.getItem("token")
              })
              .then(res => {
                  console.log('shareImg', res)
                  that.cavImg = res.baseData, //海报图片
                  that.userInfo = JSON.parse(localStorage.getItem("userInfo"))
                  // 获取二维码
                  that.$nextTick(() => {
                      that.makeShareImg();
                  });
              })
        }
    },
    computed:{
      //是否显示长按保存图片
      isPopup(){
        return /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
      }
    },
    methods: {
        makeShareImg() {
            let path="https://www.youyangfm.com" + this.link
            let data={source: 2,path}
            controller.makeShareImg(data)
              .then(res => {
                  let QRCode = res.baseData ? res.baseData : 'https://youyang-cdn.mdshuzhi.com/upload/youyang_or.png'
                  this.QRCode=QRCode
                  this.makePoster()
              })
        },
        // 是否展示个人手机号码
        // 展示手机icon
        showPhoneIconBtn() {
            console.log("展示手机icon");
            let telephone = this.userInfo.mobile || "";
            let showPhoneIcon = !this.showPhoneIcon;
            let that = this;
            if (
                this.userInfo &&
                this.userInfo.nick &&
                this.userInfo.nick.length > 6
            ) {
                this.hasLenLeft = 260;
            } else if (
                this.userInfo &&
                this.userInfo.nick &&
                this.userInfo.nick.length <= 4
            ) {
                this.hasLenLeft = 220;
            }
            // showPhoneIcon false为选择显示手机号
            this.showPhoneIcon = showPhoneIcon;
            this.telephone = this.showPhoneIcon ? " |  " + telephone : "";
            this.userNameLeft = 200; //设置名字的离左边的距离
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                that.makePoster();
            }, 300);
        }, // 输入个性文字
        limitInput(e) {
            console.log("e", e);
            let val = e.data;
            let limitNum = this.limitText.length;
            let that = this;
            console.log("输入个性文字", limitNum);

            if (limitNum < 21) {
                that.limitTextInput = "“" + this.limitText + "”";
                if (this.limitText == "") {
                    that.limitTextInput3 = ""
                } else {
                    that.limitTextInput3 = "『" + this.limitText + "』"
                }
                that.limitNum = limitNum;
                if (that.timer) {
                    clearTimeout(that.timer);
                }
                that.timer = setTimeout(() => {
                    that.makePoster();
                }, 300);
                return;
            }
        },
        saveImgBtn() {
            this.img = this.posterImgList[this.imgIndex]
            this.popupVisible = true
            this.$updateScore(7)
        },
        share() {
            var that=this;
            console.log("分享给好友")
            wx.onMenuShareAppMessage({
                title: "有氧FM·" + this.title, // 分享标题
                desc: "为你分享" + this.currentType + this.typeIndex != 3 ? "《" + this.songName + "》" : this.songName, // 分享描述
                link: "https://www.youyangfm.com" + this.link, // 分享链接
                imgUrl: this.posterImgList[this.imgIndex], // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                success: function (res) {
                    // 用户确认分享后执行的回调函数
                    Toast("分享成功")
                    that.$updateScore(7)
                },
                cancel: function (err) {
                    // 用户取消分享后执行的回调函数
                    Toast("分享失败")
                },
            });
        },
        cutString(str,len){
            var length = 0;
            var string = '';
           
            if (len > str.length) {
              return str;
            }else{
              for (var i = 0; i < len; i++) {
                var a = str.charAt(i);
           
                length++;
           
                if(escape(a).length > 4){
                  // length ++;  // html中开启
                }
           
                string = string.concat(a);
           
                if (length >= len) {
                  string = string.concat("...");
                  return string;
                }
              }
            }
        },
        // 生成海报
        makePoster() {
            this.paintingList = []
            this.posterImgList = []
            // 第一张
            this.painting = {
                width: "600px",
                height: "900px",
                background: "#fff",
                borderRadius: "8px",
                views: [{
                        type: "image",
                        url: this.cavImg, //海报图片
                        css: {
                            width: "600px",
                            height: "600px",
                            top: "0px",
                            left: "0px",
                        },
                    },
                    {
                        type: "text",
                        text: this.limitText, //“输入一句你想分享的话制作 个性海报”
                        css: [{
                            width: "600px",
                            maxLines: "2",
                            lineHeight: "60px",
                            top: "460px",
                            left: "25px",
                            color: "#fff",
                            fontSize: "40px",
                        }, ],
                    },
                    {
                        type: "image",
                        url: this.userInfo.portrait, //头像
                        css: {
                            top: "632px",
                            left: "24px",
                            borderRadius: "26px",
                            width: "52px",
                            height: "52px",
                        },
                    },
                    {
                        type: "text",
                        text: this.userInfo.nick + this.telephone, //用户名和号码
                        css: {
                            width: "500px",
                            maxLines: "1",
                            top: "640px",
                            left: "89px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        },
                    },
                    {
                        type: "text",
                        text: "为你分享" + this.currentType, //为你分享歌曲
                        css: {
                            top: "680px",
                            left: "89px",
                            color: "#323232",
                            fontSize: "24px",
                        },
                    },
                    {
                        type: "text",
                        text: "《" + this.cutString(this.songName,12) + "》", //《好想爱这个世界啊》
                        css: {
                            top: "680px",
                            left: this.typeIndex != 3?"240px":"180px",
                            color: "#C57F6F",
                            fontSize: "24px",
                        },
                    },
                    {
                        type: "rect",
                        css: {
                            width: "580px",
                            height: "1px",
                            color: "#9B9B9B",
                            bottom: "167px",
                            left: "10px",
                        },
                    },
                    {
                        type: "image",
                        url: this.QRCode, //二维码
                        css: {
                            bottom: "29px",
                            left: "21px",
                            width: "110px",
                            height: "110px",
                        },
                    },
                    {
                        type: "text",
                        text: this.isPopup ? "长按识别二维码查看" : '', //长按识别二维码查看
                        css: {
                            bottom: "105px",
                            left: "150px",
                            color: "#A8ACBB",
                            fontSize: "24px",
                        },
                    },
                    {
                        type: "image",
                        url: this.logo, //logo
                        css: {
                            bottom: "41px",
                            left: "151px",
                            width: "40px",
                            height: "40px",
                        }, 
                    },
                    {
                        type: "text",
                        text: "有氧FM·" + this.title, //有氧FM·达人分享
                        css: {
                            bottom: "51px",
                            left: "199px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        },
                    },
                ],
            };
            this.paintingList.push(this.painting)
            // 第二张
            this.painting2 = {
                width: "600px",
                height: "900px",
                background: "#fff",
                borderRadius: "8px",
                views: [{
                        type: "image",
                        url: this.cavImg, //海报图片
                        css: {
                            width: "600px",
                            height: "600px",
                            top: "0px",
                            left: "0px",
                        },
                    },
                    {
                        type: "image",
                        url: this.logo, //logo
                        css: {
                            top: "24px",
                            left: "197px",
                            width: "40px",
                            height: "40px",
                        },
                    },
                    {
                        type: "text",
                        text: "有氧FM·" + this.title, //有氧FM·歌曲分享
                        css: {
                            top: "35px",
                            left: "245px",
                            color: "#FFFFFF",
                            fontSize: "20px",
                        },
                    },
                    {
                        type: "image",
                        url: this.userInfo.portrait, //头像
                        css: {
                            bottom: "60px",
                            left: "25px",
                            borderRadius: "26px",
                            width: "52px",
                            height: "52px",
                        },
                    },
                    {
                        type: "text",
                        text: this.userInfo.nick + this.telephone, //用户名和号码
                        css: {
                            width: "500px",
                            maxLines: "2",
                            bottom: "84px",
                            left: "90px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        }, 
                    },
                    {
                        type: "rect",
                        css: {
                            width: "380px",
                            height: "1px",
                            color: "#9B9B9B",
                            bottom: "132px",
                            left: "25px",
                        },
                    },
                    {
                        type: "rect", //二维码背景
                        css: {
                            width: "128px",
                            height: "128px",
                            right: "20px",
                            bottom: this.isPopup ? "150px": '135px',
                            color: "#F6F6FA",
                            backgroundColor: "#F6F6FA",
                            borderRadius: "8px",
                        },
                    },
                    {
                        type: "rect", //指纹背景
                        css: {
                            width: "128px",
                            height: this.isPopup ? "138px": '0px',
                            right: "20px",
                            bottom: "40px",
                            color: "#F6F6FA",
                            backgroundColor: "#F6F6FA",
                            borderRadius: "8px",
                        },
                    },
                    {
                        type: "image",
                        url: this.QRCode, //二维码
                        css: [{
                            bottom: "141px",
                            right: "28px",
                            width: "110px",
                            height: "110px",
                        }, ],
                    },
                    {
                        type: "image",
                        url: this.isPopup ? "https://youyang.mdshuzhi.com/static/miniprogram/1.png" : '', //手指纹
                        css: [{
                            bottom: "81px",
                            right: "60px",
                            width: "40px",
                            height: "39px",
                        }, ],
                    },

                    {
                        type: "text",
                        text: this.isPopup ? "长按识别" : '', //长按识别
                        css: [{
                            bottom: "56px",
                            right: "50px",
                            color: "#A8ACBB",
                            fontSize: "16px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "为你推荐" + this.currentType, //为你推荐《好想爱这个世界啊爱这…
                        css: [{
                            bottom: "47px",
                            left: "90px",
                            color: "#A8ACBB",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: "《" + this.cutString(this.songName,10) + "》", //歌名
                        css: [{
                            bottom: "47px",
                            left: this.typeIndex != 3?"205px":"165px",
                            color: "#E66D4D",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "text",
                        text: this.limitTextInput3, //你想输入的文字
                        css: [{
                            width: "390px",
                            maxLines: "3",
                            lineHeight: "50px",
                            bottom: "172px",
                            left: "25px",
                            fontSize: "30px",
                            color: "#323232",
                        }, ],
                    },
                ],
            };
            this.paintingList.push(this.painting2)
            // 第三张
            this.painting3 = {
                width: "600px",
                height: "900px",
                background: "#fff",
                borderRadius: "8px",
                views: [{
                        type: "image",
                        url: this.logo, //logo
                        css: {
                            width: "40px",
                            height: "40px",
                            top: "24px",
                            left: "197px",
                        },
                    },
                    {
                        type: "text",
                        text: "有氧FM·" + this.title, //有氧FM·歌曲分享
                        css: [{
                            width: "158px",
                            top: "35px",
                            left: "245px",
                            color: "#323232",
                            fontSize: "20px",
                        }, ],
                    },
                    {
                        type: "image",
                        url: this.cavImg, //海报图片
                        css: {
                            width: "440px",
                            height: "440px",
                            top: "88px",
                            left: "80px",
                        },
                    },
                    {
                        type: "text",
                        text: this.limitText, //输入内容
                        css: {
                            width: "440px",
                            maxLines: 2,
                            lineHeight: "40px",
                            top: "610px",
                            left: "86px",
                            fontSize: "32px",
                            color: "#323232",
                            textAlign: "center",
                            fontWeight: "bold",
                        },
                    },
                    {
                        type: "image",
                        url: this.userInfo.portrait, //头像
                        css: {
                            bottom: "140px",
                            left: "274px",
                            borderRadius: "26px",
                            width: "52px",
                            height: "52px",
                        },
                    },
                    {
                        type: "text",
                        text: this.userInfo.nick + this.telephone, //用户名和号码
                        css: [{
                            width: "450px",
                            height: "40px",
                            maxLines: "1",
                            // left: this.userNameLeft2 + "px",
                            left: "75px",
                            bottom: "95px",
                            fontSize: "20px",
                            color: "#9F9EA3",
                            textAlign: "center",
                        }, ],
                    },
                    {
                        type: "text",
                        text: this.isPopup ? "长按识别二维码查看" : '', //长按识别二维码查看
                        css: [{
                            bottom: "297px",
                            left: "220px",
                            color: "#A8ACBB",
                            fontSize: "16px",
                        }, ],
                    },
                    {
                        type: "image",
                        url: this.QRCode, //二维码
                        css: {
                            top: "445px",//535
                            left: "240px",
                            width: "120px",
                            height: "120px",
                        },
                    },
                    {
                        type: "text",
                        text: "为你分享" + this.currentType, //为你分享歌曲
                        css: {
                            height: "40px",
                            width:"600px",
                            left: "10px",
                            maxLines:'1',
                            textAlign:"center",
                            bottom: "60px",
                            fontSize: "22px",
                            color: "#323232",
                        },
                    },
                    {
                        type: "text",
                        text: "《" + this.cutString(this.songName,20) + "》", //歌曲名称
                        css: {
                            bottom: "20px",
                            left: "10px",
                            width:"600px",
                            maxLines:'1',
                            textAlign:"center",
                            fontSize: "22px",
                            color: "#C57F6F",
                        },
                    },
                ],
            };
            this.paintingList.push(this.painting3)
            console.log("paintingList", this.paintingList)
        },
        // 海报生成成功
        posterSuccess(src) {
            // console.log("海报生成成功", src);
            this.posterImgList.push(src)
        },
        // 海报生成失败
        posterFail(err) {
            console.log("海报生成失败", err);
        },
    },
};
</script>

<style lang="scss" scoped>
.popup {
    background: transparent;

    .popup-image {
        width: 600px;
        max-width: 600px !important;
        height: 100%;
    }

    .popup-text {
        width: 100%;
        display: block;
        margin-bottom: 30px;
        font-size: 50px;
        color: #fff;
        text-align: center;
    }
}

.audioShare {
    background-color: #1a1c22;
    height: 1500px;

    /* 轮播图 */
    .swiperBox {
        // width: 750px;
        height: 970px;
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;
        padding: 40px 0 30px 0;

        .swiper {
            width: 100%;
            height: 100%;

            .swipe-item {
                height: 840px !important;
                margin-top: 30px;
                border-radius: 8px;
                overflow: hidden;
                display: flex;
                justify-content: center;
            }

            .change {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .change /deep/ .swiper-pagination-bullet {
                width: 16px;
                height: 16px;
                background: #ffffff;
                border: 1px solid #ffffff;
            }

            .change /deep/ .swiper-pagination-bullet-active {
                width: 20px;
                height: 20px;
                background: #E66D4D;
            }
        }

        .image {
            width: 600px;
            height: 900px;
            border-radius: 8px;
            overflow: hidden;
            position: absolute;
            left: 50%;
            margin-left: -300px;
        }
    }

    /* 选择 */
    .chooseBox {
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;

        // 判断类型是否为音频3
        .chooseBox_input {
            width: 100%;
            height: 78px;
            position: relative;

            input {
                width: 100%;
                height: 100%;
                background-color: #272c38;
                opacity: 0.8;
                color: #ffffff;
                font-size: 30px;
                padding-left: 25px;
                padding-right: 100px;
                box-sizing: border-box;
                border: none;
            }

            .limitNum {
                width: 100px;
                position: absolute;
                font-size: 20px;
                color: #fff;
                top: 24px;
                right: 0;
                opacity: 0.8;
                text-align: center;
            }
        }

        // 是否展示个人手机号码
        .chooseBox_showPhone {
            display: flex;
            align-items: center;
            margin-top: 36px;
            position: relative;
            .phoneImg {
              width: 36px;
              height: 36px;
              background: #272C38;
              border-radius: 5px;
              &.on{
                background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_xuanze@2x.png) no-repeat center center;
                background-size: 100%;
              }
              img{
                width: 100%;
                height: 100%;
              }
            }
            .showPhoneText {
                font-size: 30px;
                color: #fff;
                margin-left: 14px;
            }
        }

        /* 保存按钮 */
        .chooseBox_saveBtn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 83px;

            .saveBtnBox {
                flex: 1;
                height: 140px;
                display: flex;
                justify-content: center;
                align-items: center;

                .imgWrap {
                    width: 120px;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    position: relative;

                    img {
                        width: 90px;
                        height: 90px;
                        margin-bottom: 16px;
                    }

                    span {
                        font-size: 24px;
                        color: #fff;
                    }
                }
            }
        }
    }
}

img {
    width: 100%;
    height: 100%;
}
</style>
